<template>
	<u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"
	    length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex">
		<view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
			{{tips.text}}
		</view>
		<block v-for="(item, index) in list" :key="index">
			<view 
				@touchmove.stop.prevent 
				@tap="itemClick(index)" 
				:style="[itemStyle(index)]" 
				class="u-action-sheet-item u-line-1" 
				:class="[index < list.length - 1 ? 'u-border-bottom' : '']"
				:hover-stay-time="150"
			>
				<text>{{item.text}}</text>
				<text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{item.subText}}</text>
			</view>
		</block>
		<view class="u-gab" v-if="cancelBtn">
		</view>
		<view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class"
		    :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{cancelText}}</view>
	</u-popup>
</template>

<script>
	
	export default {
		name: "u-action-sheet",
		props: {
			
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			
			list: {
				type: Array,
				default () {
					
					
					
					
					
					
					return [];
				}
			},
			
			tips: {
				type: Object,
				default () {
					return {
						text: '',
						color: '',
						fontSize: '26'
					}
				}
			},
			
			cancelBtn: {
				type: Boolean,
				default: true
			},
			
			safeAreaInsetBottom: {
				type: Boolean,
				default: false
			},
			
			value: {
				type: Boolean,
				default: false
			},
			
			borderRadius: {
				type: [String, Number],
				default: 0
			},
			
			zIndex: {
				type: [String, Number],
				default: 0
			},
			
			cancelText: {
				type: String,
				default: '取消'
			}
		},
		computed: {
			
			tipsStyle() {
				let style = {};
				if (this.tips.color) style.color = this.tips.color;
				if (this.tips.fontSize) style.fontSize = this.tips.fontSize + 'rpx';
				return style;
			},
			
			itemStyle() {
				return (index) => {
					let style = {};
					if (this.list[index].color) style.color = this.list[index].color;
					if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + 'rpx';
					
					if (this.list[index].disabled) style.color = '#c0c4cc';
					return style;
				}
			},
			uZIndex() {
				
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
		methods: {
			
			close() {
				
				
				this.popupClose();
				this.$emit('close');
			},
			
			popupClose() {
				this.$emit('input', false);
			},
			
			itemClick(index) {
				
				if(this.list[index].disabled) return;
				this.$emit('click', index);
				this.$emit('input', false);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

	.u-tips {
		font-size: 26rpx;
		text-align: center;
		padding: 34rpx 0;
		line-height: 1;
		color: $u-tips-color;
	}

	.u-action-sheet-item {
		@include vue-flex;;
		line-height: 1;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		padding: 34rpx 0;
		flex-direction: column;
	}
	
	.u-action-sheet-item__subtext {
		font-size: 24rpx;
		color: $u-tips-color;
		margin-top: 20rpx;
	}

	.u-gab {
		height: 12rpx;
		background-color: rgb(234, 234, 236);
	}

	.u-actionsheet-cancel {
		color: $u-main-color;
	}
</style>
